<template>
    <div class="common course">
        <innerCommon :location="location">
            <template slot="left">
                <span>课程列表</span>
                <majorModule @submitSearch="submitSearch"></majorModule>
            </template>
            <div slot="right">
                <a-button type="primary" @click="add()">新增</a-button>
            </div>
            <div slot="table" class="tableWrap">
                <a-table
                    size="middle"
                    :columns="columns"
                    :data-source="list"
                    :pagination="pagination"
                    :rowKey="(record) => record.id"
                    @change="changePage"
                    :locale="{ emptyText: '暂无数据' }"
                    bordered
                >
                    <div slot="authentation" slot-scope="index, record">
                        <!-- <div>{{record.authentation}}</div> -->
                        <span v-if="record.authentation == '5'">VIP会员</span>
                        <span v-else-if="record.authentation == '4,5'"
                            >普通会员</span
                        >
                        <span v-else>注册用户</span>
                    </div>
                    <div slot="status" slot-scope="index, record">
                        <span v-if="record.status == 1" style="color: green;"
                            >已发布</span
                        >
                        <span v-else style="color: red;">未发布</span>
                    </div>
                    <div
                        slot="action"
                        slot-scope="index, record"
                        class="tableAction"
                    >
                        <span @click="toDetail(record.id)">预览</span>
                        <span @click="edit(record.id)">修改</span>
                        <confirmBox
                            @handleOk="deleteCourse(record)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="'课程'"
                        ></confirmBox>
                        <confirmBox
                            v-if="record.status != 1"
                            @handleOk="publish(record.id)"
                            :typeName="'发布'"
                        ></confirmBox>
                        <confirmBox
                            v-else
                            @handleOk="unPublish(record.id)"
                            :typeName="'取消发布'"
                        ></confirmBox>
                    </div>
                </a-table>
            </div>
        </innerCommon>
    </div>
</template>
<script>
const columns = [
    {
        title: "序号",
        dataIndex: "index",
        width: 70,
    },
    {
        title: "课程名称",
        dataIndex: "title",
    },
    {
        title: "专业方向",
        dataIndex: "majorName",
    },
    {
        title: "教学模块",
        dataIndex: "module",
    },
    {
        title: "授课教师",
        dataIndex: "teacher",
        width: 150,
    },
    {
        title: "查看权限",
        scopedSlots: { customRender: "authentation" },
        width: 100,
    },
    {
        title: "发布时间",
        dataIndex: "pubTime",
        width: 200,
    },
    {
        title: "发布者",
        dataIndex: "publisher",
        width: 100,
    },
    {
        title: "发布状态",
        scopedSlots: { customRender: "status" },
        width: 120,
    },
    {
        title: "操作",
        scopedSlots: { customRender: "action" },
        width: 200,
    },
];
import confirmBox from "@/components/common/confirmBox";
import innerCommon from "@/components/common/innerCommon";
import majorModule from "@/components/common/majorModule";
import {
    getCourseListApi,
    deleteCourseApi,
    coursePublishApi,
    updateCourseApi
} from "@/request/api";
export default {
    name: "course",
    components: { innerCommon, confirmBox, majorModule },
    watch: {
        searchValue: function (val) {
            this.searchValue = val.trim();
        },
    },
    created() {
        this.searchInfo.page = this.$route.query.page || 1;
        this.pagination.current = this.$route.query.page || 1;
        this.location = [
            {
                name: "教学课堂管理",
                path: "",
            },
            {
                name: "课程管理",
                path: "/course",
            },
        ];
        this.init();
    },
    data() {
        return {
            location: [],
            columns,
            list: [],
            searchInfo: {
                page: 1,
                pageSize: 10,
                keyword: "",
                majorId: [],
            },
            pagination: { pageSize: 10, total: 0, current: 1 },
            detailBox: false,
            searchValue: "",
        };
    },
    methods: {
        init() {
            this.getToken(getCourseListApi, this.searchInfo, (res) => {
                this.dealData(res.data.rows, res.data.count);
            });
        },
        edit(id) {
            this.$router.push({ path: "/courseAdd", query: { id } });
        },
        dealData(list, total) {
            this.list = list.map((item, index) => ({
                ...item,
                index: (this.searchInfo.page - 1) * 10 + index + 1,
                majorName: item.majors[0].name,
                module: item.majors[1].name,
                publisher: item.publisher && item.publisher.name,
            }));
            this.pagination.total = total;
        },
        changePage(data) {
            this.searchInfo.page = data.current;
            this.pagination.current = data.current;
            this.init();
        },
        toDetail(data) {
            this.$router.push({
                path: "/courseDetail",
                query: { id: data, page: this.searchInfo.page },
            });
        },
        deleteCourse(data) {
            this.getToken(deleteCourseApi, { courseId: data.id }, (res) => {
                this.$message.success(res.message);
                this.init();
            });
        },
        publish(id) {
            this.getToken(coursePublishApi, { courseId: id }, (res) => {
                this.$message.success(res.message);
                this.init();
            });
        },
        unPublish(id){
            this.getToken(updateCourseApi,{'courseId':id,status:0},()=>{
                this.init()
            })
        },
        add() {
            this.$router.push({ path: "/courseAdd" });
        },
        submitSearch(data) {
            this.searchInfo.keyword = data.keyword;
            this.pagination.current = 1;
            this.searchInfo.page = 1;
            if (data.moduleId && data.moduleId != 0) {
                this.searchInfo.majorId = data.moduleId;
            } else {
                this.searchInfo.majorId =
                    data.majorId == 0 ? null : data.majorId;
            }
            this.init();
        },
    },
};
</script>
<style lang="stylus"></style>
